/* 
    文章内容
 */
<template>
    <!-- 
       1.  :to="'/article/' + article.id"
       2.  :to="`/article/${article.id}`"
       3.  :to="{ name: 'article', params: { articleId: article.id } }" //根据路由名称跳转,传递路由动态参数,属性名:路由路径中设计的动态参数名称
    -->
    <van-cell class="articleItem" :to="{ name: 'article', params: { articleId: article.id } }">
        <div slot="title" class="title van-multi-ellipsis--l2">{{ article.title }}</div>
        <section slot="label">
            <!-- 三张封面图片 -->
            <div class="iamgeWrap" v-if="article.imageList && article.imageList.length == 3">
                <div class="ebox" v-for="(item, index) in article.imageList" :key="index">
                    <van-image class="leftImage" fit="cover" :src="item" />
                </div>
            </div>

            <span>{{ article.author }}</span>
            <span>{{ article.count }}评论</span>
            <span>{{ article.time | relativeTime }}</span>
        </section>

        <!-- 左侧文字，右侧图片 -->
        <van-image slot="default" v-if="article.imageList && article.imageList.length == 1" class="rightImage"
            fit="cover" :src="article.imageList[0]">
            <template v-slot:error>加载失败</template>
        </van-image>
    </van-cell>
</template>

<script>
export default {
    name: 'ArticleItem',
    props: {
        article: {
            type: Object,
            required: true
        }
    },
    data() {
        return {

        }
    },
    created() {

    },
    methods: {

    }
}
</script>

<style lang="less" scoped>
.articleItem {
    .title {
        font-size: 16px;
        color: #3a3a3a;
        display: flex;
        flex-wrap: wrap;
    }

    section {
        span {}
    }

    .iamgeWrap {
        display: flex;
        padding: 10px 0;

        .ebox {
            flex: 1;
            height: 76px;

            &:not(last-child) {
                padding-right: 10px;
            }

            .leftImage {
                width: 100%;
                height: 76px;
            }
        }
    }

    /deep/ .van-cell__value {
        flex: unset;
        width: 116px;
        height: 76px;
        padding-left: 10px;
    }

    .rightImage {
        width: 116px;
        height: 76px;
    }
}
</style>